<template>
	<view class="viewbox auto ">
		
		<block v-for="(item,index) in pageData" :key="index">
		<view class="list d-flex" @click="toUrl(`/pages/Details/Details?id=${item.id}`)">
			<image :src="$imgUrls(item.v_headimg)" mode="aspectFill" 
			       @error="handleImageError(index)" class="UserHead" v-if="item.v_headimg"></image>
			<image :src="$imgUrls($pop.RandomAvatar())" mode="aspectFill" class="UserHead" v-else></image>
			<view class="flex-1 d-flex f-column j-sb">
				<view class="row j-sb a-center">
					<text class="flex-1 ellipsis black size30 bold m-right10" selectable>{{item.v_name}}</text>
					<view class="authen white" v-if="item.real_name == 1">
						<view class="iconfont icon-shimingrenzheng h7 m-top4"></view>
						<text class="h7 m-left8">已实名</text>
					</view>
				</view>
				<view class="ellipsis">
					<text class="label" v-if="item.house">{{item.house}}</text>
					<text class="label" v-if="item.career">{{item.career}}</text>
					<text class="label" v-if="item.salary">{{item.salary}}</text>
				</view>
				<view class="row">
					<text class="condition" v-if="item.age">{{item.age}}岁</text>
					<text class="condition" v-if="item.height">{{item.height}}cm</text>
					<text class="condition" v-if="item.education">{{item.education}}</text>
				</view>
				<view class="row">
					<image :src="$imgUrls(sItem)" mode="aspectFill" class="MoreImg" 
					       v-for="(sItem,sIndex) in item.album" :key="sIndex" v-if="sIndex <=3"></image>
				</view>
			</view>
		</view>
		
		
	</block>
	<view class="noList auto m-top40" v-if="!pageData.length">
		<image :src="$staticImg('pixcv_image.png')"  mode="widthFix" class="rows"></image>
		<text class="color_cc size26 m-top20">暂无相关信息~</text>
	</view>
	
	
	
	
		
	
	
	</view>
</template>

<script>
	export default {
		name:"List",
		props:['pageData'],
		data() {
			return {
				
			};
		},
		methods:{
			handleImageError(event,index){
			   const Default = this.$pop.RandomAvatar();
			   this.$set(this.pageData[index],'v_headimg',Default)
			   this.$forceUpdate();
			},
			
		},
	}
</script>

<style lang="scss" scoped>
	.list{
		width:100%;
		background-color: #ffffff;
		padding:20rpx;
	    border-radius: 10rpx;
		overflow: hidden;
		margin-top: 20rpx;
	}
	.UserHead{
		width:230rpx;
		height: 240rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	.authen{
		display: flex;
		align-items: center;
		background-color: #52c9eb;
		border-radius: 20rpx;
		padding:2rpx 8rpx;
	}
	.label{
		padding:0 16rpx;
		position: relative;
		color:#8d8d8d;
		font-size:24rpx;
	}
	.label:first-child{
		padding:0 16rpx 0 0;
	}
	.label::after{
		content: '';
		width:1rpx;
		height: 24rpx;
		background-color:#ccc;
		position: absolute;
		right:0;
		top:50%;
		transform: translate(0,-50%);
	}
	.label:last-of-type::after {
	  display: none; 
	}
	.condition{
		display: block;
		padding:0 16rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
		font-size:24rpx;
		color:var(--color);
		border:1rpx solid var(--color);
	}
	.condition:last-child{
		margin-right:0;
	}
	.MoreImg{
		width:80rpx;
		height: 80rpx;
		border-radius: 6rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}
	.MoreImg:last-child{
		margin-right: 0;
	}
	.noList{
		width:500rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>